<template>
  <!-- 订单结算 -->
  <div class="order">
    <!-- 导航栏 -->
    <div class="back-nav-box">
      <back-nav left-arrow left-text="返回" title="订单结算"></back-nav>
    </div>
    <div class="order-box">
      <!-- 地址 -->
      <div class="order-address">
        <div class="angle-right" @click="selectSite">
          选择地址
          <i class="fa fa-angle-right" aria-hidden="true"></i>
        </div>
        <van-address-list
          v-model="chosenAddressId"
          :list="list"
          default-tag-text="默认"
          add-button-text="立即结算"
          @add="onAdd"
        />
      </div>

      <!-- 订单信息 -->
        <div>
          <div class="order-info">
            <div class="info-item">
              <!-- 标题 -->
             
              订单信息
            </div>
            <!-- 商品信息 -->
            <div class="search-box-item" v-for="(item,index) in orderArrays" :key="index">
              <!-- 图片 -->
              <div class="item-img">
                <img class="auto-img" :src="item.small_img" />
              </div>

              <div class="item-title-box">
                <div class="item-title-top">
                  <!-- 商品的中文名字 -->
                  <div class="item-zhtitle">
                    <div class="title-name">{{item.name}}</div>
                    <div class="title-style">{{item.rule}}</div>
                  </div>
                  <div class="item-entitle one-text">{{item.enname}}</div>
                </div>

                <div class="item-title-bot">
                  <div class="item-price">¥{{item.price}}</div>
                  <div class="select-box">
                    x
                    <span>{{item.count}}</span>
                  </div>
                </div>
              </div>
            </div>


          </div>
          <order-coffee></order-coffee>
        </div>
    </div>

    <!-- 遮罩层 -->
    <div class="wrapper" v-show="flag">
      <div class="wrapper-box">
        <div class="wrapper-right" @click="findAddress">
          <span>选择地址</span>
          <i class="fa fa-times" aria-hidden="true" @click="closeWrapper"></i>
        </div>
        <van-address-list
          v-model="chosenAddressId"
          :list="listSite"
          default-tag-text="默认"
          add-button-text="新增地址"
          @add="onAddress"
          @select="selectAddress"
        />
      </div>
    </div>
  </div>
</template>

<script>
import BackNav from "../components/BackNav.vue";
import OrderCoffee from "../components/OrderCoffee.vue";

export default {
  name: "MakeOrder",
  components: {
    BackNav,
    OrderCoffee,
  },
  data() {
    return {
      flag: false,
      orderArray: [],
      //商品数量
      sum: 0,
      //商品总价
      total: 0,
      chosenAddressId: "1",
      list: [
        {
          aid: "1",
          name: "张三",
          tel: "13000000000",
          address: "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室",
          // isDefault: true,
        },
      ],
      listSite: [],
      sids: "",
    };
  },
  computed: {
    //获取地址列表数据
    listItem() {
      return this.$store.state.list;
    },
    //获取购买的商品数据 (新增地址切换了组件而导致商品数据丢失)
    orderArrays() {
      return this.$store.state.orderArray;
    },
  },
  created() {
    //查询地址
    this.findAddress();
   
    //截取购物袋标识符 (将购物车标识符放到data数据中)
    this.sids = this.$route.params.sids;
    // 
    
    //传参
    this.commitShopcart();
  },

  methods: {
    //查询地址接口
    findAddress() {
      // 
      //store中获取的数据
      let addresslist = this.listItem;
      addresslist.forEach((element) => {
        this.listSite.push(element);
      });
    },
    //
    //查询需要购买的商品
    commitShopcart() {
      this.axios({
        method: "get",
        url: "/commitShopcart",
        params: {
          sids: JSON.stringify(this.sids),
        },
      })
        .then((res) => {
          // 
          //成功获取购买的商品数据
          if (res.data.code == 50000) {
            this.orderArray = res.data.result;
            //计算商品总价与件数
            for (let i = 0; i < this.orderArray.length; i++) {
              let price = this.orderArray[i].price;
              let num = this.orderArray[i].count;
              this.total += price * num;
              this.sum += num;
            }
            this.total = this.total.toFixed(2);
            // 提交mutation
            this.$store.commit("getSum", {
              sum: this.sum,
              total: this.total,
              orderArray: this.orderArray,
            });
          }
        })
        .catch((err) => {
          
        });
    },

    //点击立即结算
    onAdd() {
      // 
      // 传参 (解决在钩子调用,传参报错问题)
      this.onEdd(this.sids);
    },

    // 订单结算请求 删除购物车已结算的商品
    onEdd(sids) {
      //订单结算
      this.axios({
        method: "post",
        url: "/pay",
        data: {
          sids: JSON.stringify(sids),
          phone: this.list[0].tel,
          address: this.list[0].address,
          receiver: this.list[0].name,
        },
      }).then((res) => {
        // 
        //清除购物车内已结算的商品
          this.axios({
            method: "post",
            url: "/removeShopcart",
            data: {
              sids: JSON.stringify(sids),
            },
          }).then((res) => {
            // 
          }).catch(err=>{
            
          })
        
        if (res.data.code == 60000) {
          this.$toast(res.data.msg);
          this.$router.push({
            name: "MyOrder"
          });
        }
      });
    },
    //点击新增地址
    onAddress() {
      this.$router.push({ name: "AddressAdd" });
    },
    //点击选择地址 打开遮罩层
    selectSite() {
      this.flag = true;
    },
    //关闭wrapper遮罩层
    closeWrapper() {
      this.flag = false;
    },
    //点击选择地址复选框
    selectAddress(item, index) {
      // 
      // 
      this.list.splice(0, 1);
      let address = {};
      for (let key in item) {
        address[key] = item[key];
        if (key == "province") {
          address["address"] =
            item[key] + item["city"] + item["county"] + item["addressDetail"];
        }
      }
      this.list.push(address);
    },
  },
};
</script>

<style lang='less' scoped>
@import url("../assets/base.less");
/deep/ .van-button--danger {
    background-color: @mainColor;
    border-color: @mainColor;
}
.order {
  .wrapper {

    /deep/ .van-radio {
      margin-top: 0;
    }
    /deep/ .van-address-item {
      border-radius: 0;
    }
    /deep/ .van-radio__icon--checked .van-icon {
      background-color: @mainColor;
      border-color: @mainColor;
    }
  }
  .order-address {
    /deep/ .van-radio__icon {
      display: none;
    }
    /deep/ .van-address-item__address {
      color: #888;
    }
  }
  /deep/ .van-address-item__edit {
    display: none;
  }
  /deep/ .van-address-item {
    height: 110px;
  }
  /deep/ .van-radio {
    margin-top: 40px;
  }

  /deep/ .van-address-list {
    padding: 0;
    margin-bottom: 10px;
  }
  /deep/ .van-tag--danger {
    background-color: @mainColor;
  }
  
  .back-nav-box {
    position: sticky;
    top: 0;
    color: @mainColor;
  }
}

.wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  .wrapper-box {
    position: relative;
    bottom: -250px;
    height: 40%;
    overflow: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-top: 100px;
    background-color: #fff;
    .wrapper-right {
      width: 100%;
      position: sticky;
      top: 0;
      left: 0;
      z-index: 5;
      font-size: 16px;
      padding: 15px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        display: inline-block;
        flex: 1;
      }
      i {
        display: inline-block;
        width: 20px;
        color: #999;
        font-size: 22px;
      }
    }
  }
}
.order-box {
  position: fixed;
  top: 50px;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px;
  background-color: #f7f7f7;
  .order-address {
    height: 134px;
    position: relative;
    font-size: 14px;
    background-color: #fff;
    border-radius: 10px;
    .angle-right {
      position: absolute;
      top: 20px;
      left: 25px;
      z-index: 999;
    }
    .fa {
      padding-left: 5px;
    }
  }
}
.order-info {
  padding: 10px 10px;
  margin-bottom: 5px;
  margin-top: 5px;
  border-radius: 10px;
  background-color: #fff;
}
.info-item {
  padding: 0 10px;
  padding-bottom: 10px;
  font-size: 14px;
  box-sizing: border-box;
}
.search-box-item {
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-img {
  width: 100px;
  height: 100px;
  margin: 0 5px;
  background-color: @mainColor;
}
.item-title-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .item-title-top {
    .item-zhtitle {
      display: flex;
      .title-name {
        font-size: 14px;
        margin-right: 15px;
      }
      .title-style {
        font-size: 14px;
        color: #999;
      }
    }
    .item-entitle {
      margin-top: 5px;
      font-size: 12px;
      color: #999;
    }
  }
  .item-title-bot {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    padding-right: 30px;
    .item-price {
      font-size: 16px;
      color: @priceColor;
      font-weight: bold;
    }
  }
}
.sum-info {
  padding: 10px;
  background-color: #fff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  .sum-time {
    font-size: 12px;
    color: #999;
    text-align: left;
  }
  .sum-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    .sun-count {
      color: #999;
      span {
        padding: 0 5px;
      }
    }
    .sum-price {
      color: @priceColor;
      font-weight: bold;
      span {
        padding: 0 5px;
      }
    }
  }
}
</style>